<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
    <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
    <script src="/javascripts/vue@3.0.11.js" ></script>
</head>
<body>

    <div id="first">
        <div>{{message}}</div>
        <!-- 3、使用 ButtonCounter 组件 -->
        <button-counter></button-counter>
        <hr>
        <!-- 使用组件时可以采用 kebab-case 命名来引用 -->
        <button-counter></button-counter>
    </div>

    <script>

        const app = Vue.createApp({
            data(){
                return { message: '测试自定义组件' }
            }
        });

        // 1、定义组件
        const definition = {
            data(){
                return { counter: 0 }
            },
            template: `<button @click="handler" class="btn btn-primary">你已经点我{{counter}}次了</button>` ,
            methods: {
                handler(){
                    this.counter++;
                }
            }
        }

        // 2、注册 ButtonCounter 组件(全局注册)
        // 组件名称采用 PascalCase 命名法，将来使用组件时即可采用 kebab-calse 命名来引用
        app.component( 'ButtonCounter' , definition ); // app.component( name , definition );

        app.mount( '#first' );

    </script>

</body>
</html>